<template>
  <div class="video-screen" @mouseover="showStop_fn()">
    <div class="container cruise-video">
      <div class="label">
        <span class="chns-label">{{ item.parent_label }}</span>
        <span class="">{{ item.label }}</span>
      </div>
      <div class="canvas-box">
        <live-player
          :id="'player' + index"
          :video-url="videoUrl"
          live="true"
          aspect="fullscreen"
          autoplay
        ></live-player>
      </div>
      <div class="stop-btn" v-if="showStopBtn" @click.stop="stopFn()">
        <img :src="videoIcon.stop" alt="停止" title="停止" />
      </div>
    </div>
  </div>
</template>

<script>
//https://www.liveqing.com/docs/download/LivePlayer.html#%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";
// import VideoLiveQingVue from "../../videoRecord/coms/VideoLiveQing.vue";
// import { Loading } from 'element-ui';

export default {
  name: "",
  props: {
    sn: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    activeIndex: {
      type: Number,
      default: 0,
    },
    //传来的name即lable
    data: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default() {
        return {
          status: true,
          label: "",
          sn: "",
        };
      },
    },
    chns: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      //videoUrl: "https://mister-ben.github.io/videojs-flvjs/bbb.flv",
      videoUrl: "",
      videoIcon: {
        stop: require("@/assets/img/video-stop2.png"),
      },
      player: null,
      showStopBtn: true,
    };
  },
  computed: {
    flag() {
      return this.$store.state.cameraPlay.flag;
    },
    treeData() {
     // console.log(this.$store.state.cameraPlay.treeData);
      return this.$store.state.cameraPlay.treeData;
    },
  },
  created() {
    
  },
  mounted() {
    if (this.player !== null) {
      this.videoUrl == "";
      this.player = null;
    }

    this.initPlay();

    //接收到全部停止
    bus.$on("allStop", (_new) => {
      this.videoUrl == "";
      this.player = null;
      for (var i = 0; i < _new.length; i++) {
        _new[i].status = false;
      }
    });

    //初始的时候，3秒后隐藏关闭图标
    let that = this;
    setTimeout(() => {
      that.showStopBtn = false;
    }, 4000);
  },
  methods: {
    initPlay() {
      const player = document.getElementById("player" + this.index);
      this.player = player;
    },
    //鼠标悬停显示停止按钮
    showStop_fn() {
      this.showStopBtn = true;
      let that = this;
      setTimeout(() => {
        that.showStopBtn = false;
      }, 3000);
    },

    //获取url
    getUrl(sn, chns = 0) {
      if (!sn) {
        return;
      }
      return new Promise((resolve, reject) => {
        postData("/adminweb/device/stream/live/url/ticket/lasted/unlimited", {
          sn: sn,
          ptl: "WS-FLV",
          channel: chns,
          sub: 0,
        })
          .then((res) => {
            if (res.code == 0) {
              this.videoUrl = res.datas.stream;
              resolve(res);
            } else if (res.code == -56055) {
              return;
            } else {
              this.$message.error(res.code + "，" + res.msg);
            }
          })
          .catch((res) => {
          //  console.log(res);
            reject("error");
            this.$message.error("error");
          });
      });
    },
    //单个停止
    stopFn() {
      this.videoUrl == "";
      this.item["status"] = false;
      bus.$emit("hideControl", this.item);
    },
  },
  watch: {
    data: {
      handler(_new) {
        this.videoData = _new;
      },
    },
    sn: {
      handler(_new, _old) {
        if (_old != _new) {
         // console.log(_new, _old);
          this.sn = _new;
          this.getUrl(_new, this.chns);
        }
      },
      deep: true,
    },
    chns: {
      handler(_new, _old) {
       // console.log(_new);
        if (_old != _new) {
          this.chns = _new;
          this.getUrl(this.sn, _new);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestory() {
    this.videoUrl == "";
  },
};
</script>
<style scoped>
.video-screen {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 900;
}
.chns-label {
  margin-right: 10px;
}
.stop-btn {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.stop-btn img {
  width: 70%;
  height: 70%;
}
/* .fullScreen-btn {
  cursor: pointer;
  margin-left: 20px;
 
}
.fullScreen-btn img {
  width: 70%;
  height: 70%;
} */

.canvas-box {
  width: 100%;
  height: 100%;
  position: relative;
}
/* .canvas {
  width: 100%;
  height: 100%;
} */
</style>
